<template>
	<view class="cateListContainer">
		<swiper :indicator-dots="true" :autoplay="true" :interval="30000" :duration="1000">
			<swiper-item class="banners" v-for="(bannerItem,index) in cateObj.category.bannerUrlList" :key="bannerItem">
				<view class="swiper-item">
					<image class="bannerImg" :src="bannerItem"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="title">{{cateObj.category.name}}</view>
		<view class="desc">{{cateObj.category.frontDesc}}</view>
		
		<!-- 内容列表区域 -->
		<view class="shopList">
			<view class="shopItem" v-for="(shopItem,index) in cateObj.itemList" :key="shopItem.id" @click='toDetail(shopItem)'>
				<image class="shopImg" :src="shopItem.listPicUrl"></image>
				<view class="shopInfo common">{{shopItem.name}}</view>
				<view class="shopPrice common">{{shopItem.retailPrice}}元</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		props:['navId'],
		data(){
			return{
				cateList:[]
			}
		},
		mounted() {
			this.getCateList()
		},
		// 获取首页分类页的数据
		methods:{
			async getCateList(){
				this.cateList=await request('/getIndexCateList')
			},
			// 跳转至详情页（并且携带商品信息）
			toDetail(shopItem){
				wx.navigateTo({
					url:'/pages/detail/detail?shopItem=' + JSON.stringify(shopItem)
				})
			}
		},
		// 根据父id计算出对应显示的对象的数据(三级联动拿数据)
		computed:{
			cateObj(){
				return this.cateList.find(item =>item.category.parentId===this.navId)
			}
		}
	}
</script>

<style lang="stylus">
	.cateListContainer
		.banners
			width 100%
			height 370rpx
			.bannerImg
				width 100%
				height 370rpx
		.title
			font-size 36rpx
			color #333
			line-height 70rpx
			display block
			text-align center
		.desc
			font-size 26rpx
			color #999
			line-height 40rpx
			text-align center
		.shopList
			display flex
			flex-wrap wrap
			justify-content space-around
			&::after
				content ''
				width 344rpx
			.shopItem
				width 344rpx
				.shopImg
					width 344rpx
					height 344rpx
				.common
					font-size 26rpx
					line-height 50rpx
					&.shopPrice
						color red
						font-weight bold
				
</style>